$block: $prefix + 'block';

.#{$block} {
    &-empty-button {
        padding: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &-modal {
        &-body {
            display: flex;
            height: calc(80vh - 3rem);
            overflow: hidden;
        }

        &-close-button {
            position: absolute;
            top: 1rem;
            right: 2rem;
        }

        &-sidebar {
            padding: 24px;
            overflow: auto;
            width: 260px;
            flex-shrink: 0;
            cursor: pointer;
            border-right: 1px solid #E5E7EB;

            &-title {
                @apply text-2xl font-bold text-gray-900 pb-4;
            }

            &-item {
                @apply py-2.5 px-3 border-b border-gray-300;
                white-space: nowrap;
            }

            &-item-active {
                @apply bg-gray-50 font-bold;
            }
        }

        &-previews {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            gap: 16px;
            overflow: auto;
            padding: 1rem;
            padding-top: 4rem;
        }

        &-preview {
            display: flex;
            flex-direction: column;
            gap: 16px;
            width: calc(50% - 8px);

            &-item {
                position: relative;
                cursor: pointer;
            }

            &-title {
                padding: 8px 0;
            }

            &-content {
                zoom: calc(100% / 3);
                overflow: hidden;
                user-select: none;
                pointer-events: none;
                border-radius: 16px;
                transition: all 0.3s ease;
                border: 1px solid #dbdbdb;
            }

            &-item:hover &-content {
                border-color: #3F83F8;
            }
        }
    }
}